<template>
    <div id="manage">
        <div
            ref="articleData"
            class="article-data"
        >
            <add-fun v-if="hasAdd"></add-fun>
            <el-table
                v-loading="loading"
                :data="userList"
                border
                style="width: 100%"
                :max-height="tableMaxHeight"
            >
                <el-table-column
                    label="序号"
                    type="index"
                    width="80"
                    align="center"
                    fixed="left"
                ></el-table-column>
                <el-table-column
                    prop="addtime"
                    label="添加时间"
                    width="180"
                    fixed="left"
                ></el-table-column>
                <el-table-column
                    prop="netName"
                    label="网名"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    prop="sex"
                    label="性别"
                    width="180"
                >
                </el-table-column>
                <el-table-column
                    prop="profession"
                    label="职业"
                    width="200"
                >
                </el-table-column>
                <el-table-column
                    prop="nativePlace"
                    label="籍贯"
                    width="200"
                >
                </el-table-column>
                <el-table-column
                    prop="mail"
                    label="邮箱"
                    width="200"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                    fixed="right"
                    width="150"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import { manageCommonMixins } from 'assets/js/mixins';
    import { searchUser, deleteUser } from 'assets/js/api';
    import { mapMutations } from 'vuex';
    export default {
        mixins: [
            manageCommonMixins
        ],
        data () {
            return {
                loading: true, // table loading flag
                userList: [] // 用户列表
            };
        },
        computed: {
            hasAdd () {
                return this.userList.length <= 0;
            }
        },
        watch: {
            '$route' () {
                if (this.$route.name === 'userManage') {
                    this.searchUser();
                }
            }
        },
        mounted () {
            this.searchUser();
        },
        methods: {
            ...mapMutations({
                setUserInfo: 'SET_USER_INFO'
            }),
            /**
             * 添加
             */
            addFun () {
                this.goToEditUser();
            },
            /**
             * 编辑
             * @param {Number} index 当前人员索引
             * @param {Object} row 当前人员信息
             */
            handleEdit (index, row) {
                this.setUserInfo(row);
                this.goToEditUser('edit');
            },
            /**
             * 删除
             * @param {Number} index 当前人员索引
             * @param {Object} row 当前人员信息
             */
            handleDelete (index, row) {
                deleteUser({
                    _id: row._id
                }).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.$message.success(res.msg);
                    this.searchUser();
                });
            },
            /**
             * 查询人员列表
             */
            searchUser () {
                this.loading = true;
                searchUser({}).then(res => {
                    if (!res.status) {
                        this.$message.info(res.msg);
                        return;
                    }
                    this.userList = res.data;
                    this.loading = false;
                });
            },
            /**
             * 跳转到用户编辑页
             * @param {String} from 状态 默认添加
             */
            goToEditUser (from = 'add') {
                this.$router.push({
                    path: '/userManage/editUser',
                    query: {
                        from
                    }
                });
            }
        }
    };
</script>

<style lang="less" scoped>
@import '~assets/styles/manageCommon';
</style>
